<template>
	<div>
		<Modal v-model="viewPermission"  v-if="liveInfo.viewPermission==1" :closable="false"
		 :mask-closable="false">
			<p slot="header" style="text-align:center;position: relative;">
				<span v-text="liveInfo.guideDescribe==null||liveInfo.guideDescribe==''?'欢迎观看直播活动':liveInfo.guideDescribe"></span>
			</p>
			<Form ref="formInline" :model="formInline" :rules="ruleInline">
				<FormItem prop="text1">
					<Input type="text" size="large" v-model="formInline.text1" placeholder="请输入观看密码"></Input>
				</FormItem>
			</Form>
			<div slot="footer">
				<Button size="large" long @click="proving('formInline')" :style="{background:liveInfo.labelColor}">进入直播</Button>
			</div>
		</Modal>
		<Modal v-model="viewPermission" v-if="liveInfo.viewPermission==2" :closable="false"
		 :mask-closable="false">
			<p slot="header" style="text-align:center;">
				<span v-text="liveInfo.guideDescribe==null||liveInfo.guideDescribe==''?'欢迎观看直播活动':liveInfo.guideDescribe"></span>
			</p>
			<Form ref="formInline" :model="formInline" :rules="ruleInline">
				<FormItem prop="phone">
					<Input type="text" v-model="formInline.phone" placeholder="请输入手机号"></Input>
				</FormItem>
				<FormItem prop="yzcode">
					<Row>
						<Col span="15"><Input type="text" v-model="formInline.yzcode" size="large" placeholder="验证码"></Input></Col>
						<Col span="8" offset="1"><Button :style="{background:liveInfo.labelColor}" @click="countdown" :disabled="disabled || wait > 0" style="width:100%;">{{ yzmTxt }}</Button></Col>
					</Row>
				</FormItem>
			</Form>
			<div slot="footer">
				<Button size="large" long @click="verifyCode('formInline')" :style="{background:liveInfo.labelColor}">进入直播</Button>
			</div>
		</Modal>
		<!-- <Modal v-model="viewPermission" title="付费页面" style="max-width: 500px;" :beforeClose="verifyCode"
		 show-cancel-button v-if="liveInfo.viewPermission==3">
			<div :style="{width:restricWidth,paddingTop:restrucTop}" class="restr">
				<div class="demo-input-suffix">
					<div class="modal-payment">
						<h3>￥{{payLive || liveInfo.fee}}元</h3>
					</div>
					<Input v-model="input1" left-icon="phone-o" placeholder="请输入输入手机号" />
					<div class="ffym">
						<Input v-model="yzcode" left-icon="bag-o" placeholder="验证码" />
						<van-button type="info" @click="countdown" :disabled="disabled || wait > 0">{{ yzmTxt }}</van-button>
					</div>
					<van-button type="info" @click="verifyCode">付费观看</van-button>
				</div>
			</div>
		</Modal> -->
	</div>
</template>

<script>
	export default {
		data() {
			return {
				formInline: {
					phone: '',
					yzcode: '',
					text1: "",
				},
				ruleInline: {
					text1: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: 'blur'
						},
						{
							type: "number",
							message: '请输入正确的手机号',
							trigger: 'blur',
							transform(value) {
								var myreg = /^[1][3,4,5,6,7,8][0-9]{9}$/;
								if (!myreg.test(value)) {
									return false
								} else {
									return Number(value)
								}
							}
						}
					],
					yzcode: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}, ]
				},
				input1: "",
				yzcode: "",
				wait: 0,
				disabled: false,
				timerCunt: "",
				payLive: 0,
				restricWidth: "100%",
				restrucTop: "0px",
				bg: "",
				Info: "",
				toast: ""
			};
		},
		computed: {
			viewPermission() {
				return this.$store.state.viewPermission;
			},
			yzmTxt() {
				return this.wait > 0 ? "重新获取（" + this.wait + "）" : "获取验证码";
			},
			liveInfo() {
				return this.$store.state.liveInfo;
			}
		},
		created() {},
		methods: {
			verifyCode(name) {
				var info = this.$store.state.liveInfo;
				this.$refs[name].validate((valid) => {
					if (valid) {
						var yzobj = new FormData();
						yzobj.append("phone", this.formInline.phone);
						yzobj.append("code", this.formInline.yzcode);
						this.$http.post(this.$api.verifyCode(), yzobj).then(res => {
							this.$set(this.$store.state, "signPhone", this.formInline.phone); //用于签到
							if (res.data.code == 0) {
								if (!res.data.flag) {
									this.$Message.error('验证码不匹配，请重新输入!');
								} else {
									this.verifyAll(
										info.viewPermission,
										info.id,
										this.formInline.phone,
									);
									this.$store.state.bootPageShow=false
								}

							}
						});
					}
				})
			},
			countdown(name) {
				if (this.formInline.phone.trim() == "") {
					this.$Message.error('请填写手机号!');
				} else {
					/*60秒倒计时*/
					this.wait = 60;
					if (this.wait == 0) {
						this.wait = 60;
					} else {
						this.disabled = true; //获取按钮禁止
						this.timerCunt = setInterval(() => {
							if (this.wait > 0 && this.wait <= 60) {
								this.wait--;
							} else {
								this.disabled = false; //按钮可点击
								clearInterval(this.timerCunt);
								this.timerCunt = null;
							}
						}, 1000);
					}
					this.getcode(this.formInline.phone);
				}
			},
			getcode(phone) {
				var tel = new FormData();
				tel.append("phone", phone);
				this.$http.post(this.$api.sendProving(), tel).then(res => {
					if (res.data.code != 0) {
						this.$Message.error("短信验证码三分钟内有效，请勿重复获取");
						this.wait = 0;
					}
				});
			},
			proving(name) {
				this.$refs[name].validate((valid) => {
					if (valid) {
						this.verifyAll(
							1,
							this.$route.params.id,
							this.formInline.text1,
						);
						this.$store.state.bootPageShow=false
					}
				})
			},
			verifyAll(type, roomId, content) {
				/*所有验证接口*/ // type 1 是密码 2手机验证 3 付费 4白名单
				let openId = ""
				if (sessionStorage.getItem("openid")) {
					openId = sessionStorage.getItem("openid");
				} else {
					openId = localStorage.getItem("youkeId")
				}
				this.$http
					.get(this.$api.verify(type, openId, roomId, content))
					.then(res => {
						if (res.data.verifyresult) {
							this.$store.state.viewPermission = false;
							location.reload()
						} else {
							if (type == 1) {
								this.$Message.error("您的密码错误，暂时无法观看");
							} else if (type == 2) {
								this.$Message.error("您没有观看权限，暂时无法观看");
							} else if (type == 3) {
								this.payFee(); //不在白名单内,支付
							} else if (type == 4) {
								this.$Message.error("您没有观看权限，暂时无法观看");
							}
						}
					});
			},
			proving_white(phone) {
				let content = "";
				if (phone == 0) {
					content = this.input1;
				} else if (phone == 1) {
					content = sessionStorage.getItem("bankphone");
				}
				let openId = ""
				if (sessionStorage.getItem("openid")) {
					openId = sessionStorage.getItem("openid");
				} else {
					openId = localStorage.getItem("youkeId")
				}
				this.$http
					.get(
						this.$api.verify(
							2,
							openId,
							this.$route.params.id,
							content
						)
					)
					.then(res => {
						if (res.data.verifyresult) {
							this.$set(this.$store.state, "signPhone", content); //用于签到
							this.$set(this.$store.state, "signUid", res.data.userinfo.id); //用于签到
							this.$set(this.$store.state, "signName", res.data.userinfo.name); //用于签到
							this.$set(this.$store.state, "signNum", res.data.userinfo.num); //用于签到
						} else {
							this.$Message.error("您的手机号没有观看权限，暂时无法观看！");
							return;
						}
					});
			},
			payFee() {
				let openId = ""
				let nickname = ""
				if (sessionStorage.getItem("openid")) {
					openId = sessionStorage.getItem("openid");
					nickname = sessionStorage.getItem("nickname");
				} else {
					openId = localStorage.getItem("youkeId")
					nickname = localStorage.getItem("youkeName");
				}
				/*支付*/
				let ip = returnCitySN["cip"];
				let money = this.payLive * 100;
				var data = new FormData();
				data.append("roomId", this.$route.params.id)
				data.append("companyId", sessionStorage.getItem("companyId"));
				data.append("openid", openId);
				data.append("wxName", nickname);
				data.append("totalFee", money);
				data.append("phone", this.input1);
				data.append("body", "就是测试");
				data.append("spbillCreateIp", ip);
				this.$http.post(api.payment(), data).then(res => {
					if (res.data.code == 0) {
						// this.$set(this.$store.state, "awardShow", false);
						this.callWX(res.data.result);
					}
				});
			},
			callWX(obj) {
				if (typeof WeixinJSBridge == "undefined") {
					if (document.addEventListener) {
						document.addEventListener(
							"WeixinJSBridgeReady",
							this.onBridgeReady,
							false
						);
					} else if (document.attachEvent) {
						document.attachEvent("WeixinJSBridgeReady", this.onBridgeReady);
						document.attachEvent("onWeixinJSBridgeReady", this.onBridgeReady);
					}
				} else {
					this.onBridgeReady(obj);
				}
			},
			onBridgeReady(obj) {
				let self = this;
				WeixinJSBridge.invoke(
					"getBrandWCPayRequest", {
						appId: obj.appId, //公众号名称，由商户传入
						timeStamp: obj.timeStamp, //时间戳，自1970年以来的秒数
						nonceStr: obj.nonceStr, //随机串
						package: obj.package,
						signType: "MD5", //微信签名方式：
						paySign: obj.jsSign //微信签名
					},
					res => {
						// this.videoIfshow(); //视频显示
						if (res.err_msg == "get_brand_wcpay_request:ok") {
							// 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回 ok，但并不保证它绝对可靠。
							self.queryOrderok(obj); // 查询订单
						} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
							this.$Message.error("订单已取消");
						} else {
							this.$Message.error("支付失败");
						}
					}
				);
			},
			queryOrderok(obj) {
				// 查询订单 type 1打赏 2发红包 3 付费
				this.$http
					.get(this.$api.queryOrder(), {
						params: {
							out_trade_no: obj.out_trade_no,
							type: 3
						}
					})
					.then(res => {
						if (res.data.code == 0) {
							console.log(res);
							// this.pop = false;
							// this.paymentyz = false;
							// this.yzFirst();
						} else {
							this.$Message.error("当前支付异常，资金将在2个工作日内原路返回");
						}
					});
			}
		}
	};
</script>

<style lang="less" rel=stylesheet/less scoped="scoped">
	#viewingRestriction {
		background: #fff;
		display: flex;
		justify-content: center;
		height: 100%;
		width: 100%;
	}

	.toast {
		color: red;
	}

	#viewingRestriction p {
		color: #fff;
		width: 100%;
		height: 40px;
		line-height: 40px;
	}

	.demo-input-suffix {
		background: #fff;
	}

	.ffym {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
		button {
			width: 40%;
			border: 0;
			margin-left: 10px;
			color: #fff;
		}
	}
button {
			color: #fff;
		}
	.modal-payment {
		margin-top: 20px;
	}
	.handleClosed{
		font-size: 20px;
		position: absolute;
		right: 0;
		cursor: pointer;
	}
</style>
